<template>
    <!-- 登录注册-->
    <div class="myLogin" v-if="!$store.state.loginFlag">
        <a-icon type="shopping-cart" style="font-size: 20px"/>
        <span class="span1">|</span>
        <span class="span2" @click="showModal"
        >登录/注册
      <a-modal v-model="$store.state.modelFlag" :footer="null">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="普通登录">
            <div class="components-input-demo-presuffix">
              <a-input ref="userNameInput" v-model="username" placeholder="请输入账号"
                       style="width: 280px; height: 35px;margin-bottom: 25px">
                <a-icon slot="prefix" type="user"/>
              </a-input>
              <a-input-password
                      placeholder="请输入密码"
                      v-model="password"
                      style="width: 280px; height: 35px"
              >
                <a-icon slot="prefix" type="lock"/>
              </a-input-password>
            </div>
            <a-button type="primary" block style="margin-top: 20px" @click="toLogin">
              登录
            </a-button>
            <div class="box">
              <span style="color: #8c8c8c">立即注册！</span>
              <span style="float: right;color: #8c8c8c">忘记密码？</span>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="手机登录" force-render>
            <div class="components-input-demo-presuffix">
              <a-input ref="userNameInput" v-model="phone" placeholder="请输手机号" style="width: 280px; height: 35px"
              >
                <a-icon slot="prefix" type="user"/>
              </a-input>
              <br/>
              <br/>
              <a-input placeholder="请输入验证码" v-model="passwordA" style="width: 170px; height: 35px">
                <a-icon slot="prefix" type="lock"/>
              </a-input>
              <a-button type="primary" style="margin-left: 10px; border-radius: 6px" @click="checking"
              >
                发送验证码
              </a-button>
            </div>
            <a-button type="primary" block style="margin-top: 20px" @click="phonelogin"
            >
              登录
            </a-button>
            <div class="box">
                <span>立即注册！</span>
              <span style="float: right">忘记密码？</span>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
    </span>
        <a-icon type="user" style="font-size: 24px"/>
    </div>
    <div v-else class="myLogin">
        <!--        购物车-->
        <router-link to="/car">
            <a-icon type="shopping-cart" style="font-size: 20px;cursor: pointer;color: black"/>
        </router-link>
        <span class="span1">|</span>
        <span>
      <a-dropdown>
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          {{ $store.state.userInfo.nickname }}
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <router-link to="/i">
                <a href="javascript:;" style="color:black;;">个人中心</a>
            </router-link>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">我的课程</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">我的订单</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="goOut">退出登录</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
        <a-avatar :src="$store.state.userInfo.avatarUrl"/>
    </div>
</template>
<script>
    // 登录
    import {login} from "../api/api";
    //退出
    import {logout} from "../api/api";
    //验证码
    import {codeAuth} from "../api/api";
    // 手机登录
    import {phoneLogin} from "../api/api";

    export default {
        data() {
            return {
                username: "123jie",
                password: "111222",
                code: 500,
                passwordA: "",
                //验证码
                authCode: "",
                phone: "",
            };
        },
        methods: {
            toLogin() {
                login(this.username, this.password, true).then((res) => {
                    console.log(res);
                    this.code = res.code;
                    if (res.code == 0) {
                        this.$message.success("登录成功,欢迎回来");
                        // this.visible = false;
                        // 修改vuex中的标识符状态
                        this.$store.commit("change", {
                            loginFlag: true,
                            userInfo: res.userInfo,
                        });
                    } else {
                        this.$message.warning("用户名或者密码不存在");
                    }
                });
            },
            showModal() {
                // this.visible = true;
                this.$store.commit("changemodel", {
                    modelFlag: true,
                });
            },
            //验证码
            checking() {
                codeAuth(this.phone).then((res) => {
                    console.log(res);
                    this.$message.success("发送成功");
                });
            },
            //手机号登录
            phonelogin() {
                phoneLogin(this.phone, this.passwordA).then((res) => {
                    console.log(res);
                    if (res.code == 0) {
                        this.$message.success("登录成功");
                        this.visible = false;
                        // 修改vuex中的标识符状态
                        this.$store.commit("change", {
                            loginFlag: true,
                            userInfo: res.userInfo,
                        });
                    } else {
                        this.$message.warning("用户名或密码不存在");
                    }
                });
            },
            //退出登录
            goOut() {
                logout().then(() => {
                    this.$message.success("退出成功");
                    // 刷新界面
                    this.$router.go(0);
                });
            },
        },
    };
</script>
<style lang="less" scoped>
    .myLogin {
        height: 100%;
        float: right;
        margin-right: 100px;
        font-size: 14px;
        padding: 32px 0 0;
    }

    i {
        vertical-align: middle;
        margin-right: 5px;
    }

    .span1 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .span2 {
        cursor: pointer;
        margin-right: 5px;
    }

    .ant-dropdown-link {
        color: black;
    }

    /deep/ .ant-tabs-ink-bar {
        background-color: #00cf8c;
        width: 150px !important;
    }

    /deep/ .ant-tabs-nav .ant-tabs-tab-active {
        color: #00cf8c;
    }

    /deep/ .ant-tabs-nav .ant-tabs-tab:hover {
        color: #00cf8c;
    }

    /deep/ .ant-btn-primary {
        color: white;
        background-color: #00cf8c;
        border: #00cf8c;
    }

    /deep/ .ant-btn-primary:hover {
        background-color: #00cf8c;
    }

    /deep/ .ant-modal {
        width: 360px !important;
    }

    /deep/ .ant-modal-body {
        padding: 20px 36px 24px;
    }

    /deep/ .ant-tabs-tab {
        width: 120px;
        height: 50px;
        text-align: center;
    }

    .box {
        margin-top: 10px;
    }

    .box span {
        color: #00cf8c;
    }
</style>